import React from 'react';
import { Card, Row, Col, Statistic, Typography } from 'antd';
import { ShopOutlined, UserOutlined, EyeOutlined, DollarOutlined } from '@ant-design/icons';

const { Title } = Typography;

const HomePage: React.FC = () => {
  return (
    <div className="p-6 bg-campus-gradient min-h-screen">
      {/* 页面标题 */}
      <div className="text-center mb-8">
        <h1 className="page-title">校园二手交易平台</h1>
        <p className="text-lg text-gray-600 max-w-2xl mx-auto">
          专为校园环境设计的二手物品交易平台，让闲置物品找到新主人，促进资源循环利用
        </p>
      </div>
      
      {/* 数据统计卡片 */}
      <Row gutter={[16, 16]} className="mb-8">
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card hover:transform hover:-translate-y-1 transition-transform duration-200">
            <Statistic
              title="今日商品数"
              value={156}
              prefix={<ShopOutlined className="text-primary-500" />}
              valueStyle={{ color: '#22c55e' }}
            />
            <div className="text-xs text-gray-500 mt-2">较昨日 +12%</div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card hover:transform hover:-translate-y-1 transition-transform duration-200">
            <Statistic
              title="在线用户"
              value={128}
              prefix={<UserOutlined className="text-blue-500" />}
              valueStyle={{ color: '#3b82f6' }}
            />
            <div className="text-xs text-gray-500 mt-2">活跃用户在线</div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card hover:transform hover:-translate-y-1 transition-transform duration-200">
            <Statistic
              title="今日浏览量"
              value={892}
              prefix={<EyeOutlined className="text-red-500" />}
              valueStyle={{ color: '#ef4444' }}
            />
            <div className="text-xs text-gray-500 mt-2">峰值时段 14:00-16:00</div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card hover:transform hover:-translate-y-1 transition-transform duration-200">
            <Statistic
              title="成交金额"
              value={3580}
              prefix={<DollarOutlined className="text-purple-500" />}
              precision={2}
              valueStyle={{ color: '#8b5cf6' }}
              suffix="元"
            />
            <div className="text-xs text-gray-500 mt-2">今日交易总额</div>
          </Card>
        </Col>
      </Row>

      {/* 功能简介 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card 
            title="平台特色" 
            bordered={false}
            className="card-campus h-full"
          >
            <div className="feature-list">
              <div className="feature-item">
                <span className="text-2xl">💡</span>
                <div>
                  <h4 className="font-semibold text-gray-900">智能搜索与分类浏览</h4>
                  <p className="text-sm text-gray-600">精准查找您需要的商品，支持多维度筛选</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">🎯</span>
                <div>
                  <h4 className="font-semibold text-gray-900">个性化商品推荐</h4>
                  <p className="text-sm text-gray-600">基于兴趣和行为的智能推荐算法</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">🚀</span>
                <div>
                  <h4 className="font-semibold text-gray-900">便捷的商品发布与管理</h4>
                  <p className="text-sm text-gray-600">简化发布流程，一站式管理您的商品</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">📍</span>
                <div>
                  <h4 className="font-semibold text-gray-900">基于位置的附近商品发现</h4>
                  <p className="text-sm text-gray-600">发现身边的闲置物品，支持校园内交易</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">🔒</span>
                <div>
                  <h4 className="font-semibold text-gray-900">安全的交易保障机制</h4>
                  <p className="text-sm text-gray-600">实名认证和信用评价体系确保交易安全</p>
                </div>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card 
            title="快速开始" 
            bordered={false}
            className="card-campus h-full"
          >
            <div className="feature-list">
              <div className="feature-item">
                <span className="text-2xl">📱</span>
                <div>
                  <h4 className="font-semibold text-gray-900">注册登录账号</h4>
                  <p className="text-sm text-gray-600">使用校园邮箱快速注册，验证身份</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">🛍️</span>
                <div>
                  <h4 className="font-semibold text-gray-900">浏览商品或发布商品</h4>
                  <p className="text-sm text-gray-600">探索海量商品或发布您的闲置物品</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">🔍</span>
                <div>
                  <h4 className="font-semibold text-gray-900">使用智能搜索功能</h4>
                  <p className="text-sm text-gray-600">关键词搜索、分类筛选、价格区间</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">💬</span>
                <div>
                  <h4 className="font-semibold text-gray-900">与卖家沟通交流</h4>
                  <p className="text-sm text-gray-600">在线聊天功能，方便快捷沟通</p>
                </div>
              </div>
              <div className="feature-item">
                <span className="text-2xl">✅</span>
                <div>
                  <h4 className="font-semibold text-gray-900">完成交易评价</h4>
                  <p className="text-sm text-gray-600">交易完成后互相评价，积累信用</p>
                </div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 行动号召区域 */}
      <div className="text-center mt-12 p-8 bg-white rounded-2xl shadow-soft border border-gray-100">
        <h3 className="text-2xl font-bold text-gray-900 mb-4">立即开启您的校园二手交易之旅</h3>
        <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
          加入我们，让闲置物品焕发新生，为环保助力，同时获得额外的收入
        </p>
        <div className="space-x-4">
          <button className="btn-campus">
            立即注册
          </button>
          <button className="btn-campus-secondary">
            浏览商品
          </button>
        </div>
      </div>
    </div>
  );
};

export default HomePage;